/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-04-01 10:56:49
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 16:36:33
 */
import React from 'react';

import { Button, Form, Input, Modal, Select,Space,Upload } from 'antd';
// import { EyeOutlined } from '@ant-design/icons'

import FooterButton from '../footer/FooterButton';



const { Option } = Select;
const provinceData = ['请选择','产品大分类', '体育','电竞','电子','测试'];
const cityData = {
  请选择:['请选择'],
  产品大分类: ['子分类'],
  体育: ['篮球', '足球'],
  电竞: ['lol'],
  电子: [],
  测试: ['测试','weq']
};



const ModalApp = (props) => {
    console.log(props);
    // const [isModalVisible, setIsModalVisible] = useState(false);


    // select 下拉 联动选择框 数据

  const [cities, setCities] = React.useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = React.useState(cityData[provinceData[0]][0]);

  const handleProvinceChange = value => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = value => {
    setSecondCity(value);
  };
  

  // 文件上传
  // const props1 = {
  //   name: 'file',
  //   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  //   headers: {
  //     authorization: 'authorization-text',
  //   },
  //   onChange(info) {
  //     if (info.file.status !== 'uploading') {
  //       console.log(info.file, info.fileList);
  //     }
  //     if (info.file.status === 'done') {
  //       message.success(`${info.file.name} file uploaded successfully`);
  //     } else if (info.file.status === 'error') {
  //       message.error(`${info.file.name} file upload failed.`);
  //     }
  //   },
  // };

//   const normFile = (e: any) => {
//     console.log('Upload event:', e);
//     if (Array.isArray(e)) {
//       return e;
//     }
//     return e && e.fileList;
//   };


  return (
    <>
      <Modal 
      maskClosable={false} 
      mask={false} 
      title={props.title} 
      footer={[
        <FooterButton 
        key='btnBox'
        btn1='保存' 
        btn2='关闭' 
        clickBtn1={props.handleOk}
        clickBtn2={props.handleCancel}
         />
         ]}
      destroyOnClose={true} 
      visible={props.visible} 
      // onOk={props.handleOk} 
      onCancel={props.handleCancel} 
      centered={true}
      >
      <Form
      size='small'
      name="basic"
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 18,
      }}
      initialValues={{
        remember: true,
        largeClass:'请选择',
        smallClass:'请选择',
        storeNum:'0',
        min:10,
        cost:0,
        price:0,
        goodsSort:100,
      }}
    //   onFinish={onFinish}
    //   onFinishFailed={onFinishFailed}
      autoComplete="off"

    >
      <Form.Item
        label="商品分类"
        rules={[
          {
            // required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Form.Item name='largeClass' noStyle>
            <Select style={{ width: 120 }} onChange={handleProvinceChange}>
            {provinceData.map(province => (
              <Option key={province}>{province}</Option>
            ))}
        </Select>
        </Form.Item>
        
        <Form.Item name='smallClass' noStyle>
            <Select style={{ width: 120 }} value={secondCity} onChange= {onSecondCityChange}>
              {cities.map(city => (
                <Option key={city}>{city}</Option>
              ))}
            </Select>
        </Form.Item>
        
      </Form.Item>

      <Form.Item
        label="商品名称"
        name="goodsName"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input style={{width:"240px"}} />
      </Form.Item>

      <Form.Item
        name="goodsItem"
        label="商品图"
        // valuePropName="fileList"
        // getValueFromEvent={normFile}
        
      >
          <Space>
          <Upload name="logo" listType="text" >
            <Button type='primary' style={{marginRight:"10px"}}> 选择文件</Button>
          </Upload>
          </Space>
      </Form.Item>

      <Form.Item
        label="规格"
        name="size"
        rules={[
          {
            // required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input style={{width:"120px"}} />
      </Form.Item>

      <Form.Item
        label="型号"
        name="model"
        rules={[
          {
            // required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input style={{width:"120px"}} />
      </Form.Item>

      <Form.Item
        label="商品库存"
      >
        <Space>
          <Form.Item 
          rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]} name="storeNum" noStyle>
            <Input style={{width:"120px"}} />
          </Form.Item>
            
            <span>当商品存库低于</span>
          <Form.Item name='min' noStyle>
            <Input style={{width:"60px"}} />
          </Form.Item>
            
            <span>时告警!</span>
        </Space>
      </Form.Item>

      <Form.Item
        label="成本"
      >
        <Space>
          <Form.Item 
          rules={[
          {
            required: true,
            message: '请输入成本',
          },
        ]} name="cost" noStyle>
              <Input style={{width:"120px"}} />
          </Form.Item>
            
          <Form.Item noStyle>
              <span>元</span>
          </Form.Item>
            
        </Space>
        
      </Form.Item>

      <Form.Item
        label="售价"
      >
        <Space>
            <Form.Item name="price" 
            rules={[
          {
            required: true,
            message: '请输入售价!',
          },
        ]} noStyle>
                <Input style={{width:"120px"}} />
            </Form.Item>

            <Form.Item noStyle>
                <span>元</span>
            </Form.Item>
        </Space>
      </Form.Item>
      
      <Form.Item
        label="商品备注"
        name="goodsRemark"
        rules={[
          {
            // required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.TextArea />
      </Form.Item>

      <Form.Item
        label="商品排序"
        rules={[
          {
            // required: true,
            message: 'Please input your password!',
          },
        ]}
      >
       <Space>

         <Form.Item name="goodsSort" noStyle>
            <Input style={{width:"120px"}} />
         </Form.Item>

         <Form.Item noStyle>
            <span>默认100,越小越靠前</span>
         </Form.Item>
            
       </Space>
      </Form.Item>
    </Form>
      </Modal>
    </>
  );
};

export default ModalApp;
